<template>
  <div id="Persent" style="height: 100%; width: 100%;" />
</template>
<script>
import echarts from 'echarts'

export default {
  name: 'Persent',
  data() {
    return {
    }
  },
  computed: {
  },
  created() {

  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      var myChart = echarts.init(document.getElementById('Persent'))
      const option = {

        title: {
          text: '完成情况'
          // subtext: '单位（人）'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            color: ['#5fb878', '#ddd'],
            avoidLabelOverlap: false,
            hoverAnimation: false, // 关闭放大动画
            selectedOffset: 0, // 选中块的偏移量
            label: {
              show: false,
              position: 'center',
              formatter: '{d}%'
            },
            // emphasis: {
            //   itemStyle: {
            //     // 高亮时点的颜色。
            //     color: ['#ff0000', '#5fb878']
            //   },
            //   label: {
            //     show: true,
            //     fontSize: '20',
            //     fontWeight: 'bold'
            //   }
            // },
            labelLine: {
              show: false
            },
            data: [
              {
                value: 435,
                name: '直接访问',
                selected: true, // 默认选中第一块
                label: {
                  show: true, // 默认显示第一块
                  fontSize: '20',
                  fontWeight: 'bold'
                }},
              { value: 310, name: '邮件营销' }
            ]
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>
